<template>
	<view class="box">
	    <!-- 选择会员 -->
	    <view class="selectMember">
	    	<view class="member">
	    		<view @click="selected != 1 ? dialog = true : ''">{{userName || '会员：'}}</view>
	    		<view style="position: relative;">{{start_date || '日期：'}}
	    			<picker mode="date" :start="start" :end="end"  @change="bindDateChange" v-if="selected != 1" style="position: absolute;left:0;top: 0;width: 100%;height: 100%;">
	    				<view class="date">{{start_date}}</view>
	    			</picker> 
	    		</view>
	    	</view>
	    	<view class="save" v-if="selected != 1" @click="save(1)">保存</view>
	    	<view class="toSend" @click="save(3)">生成评估</view>
	    </view>
		
		<view class="slidingBlock">
			<view>
				<text class="on"></text>
				<text :class="number == 2 || number == 3 || number == 4 || number == 5 || number == 6 ? 'on' : ''"></text>
				<text :class="number == 3 || number == 4 || number == 5 || number == 6? 'on' : ''"></text>
				<text :class="number == 4 || number == 5 || number == 6? 'on' : ''"></text>
				<text :class="number == 5 || number == 6 ? 'on' : ''"></text>
				<text :class="number == 6 ? 'on' : ''"></text>
			</view>
			<view>{{number}}/6</view>
		</view>
			
		<view class="content"  @touchstart="touchStart" @touchend="touchEnd">
			<view>
				<view class="navigator">
					<image :src="'../../../../static/img/healthStatus/diet'+number+'@2x.png'"></image>
				</view>
				<view v-for="(item,index) in questionnaire[number-1] && questionnaire[number-1].adTopicsRepliesEntityList" :key="index" >
					<template v-if="!item.hidden">
						<!-- 单选 -->
						<view class="question" v-if="item.status == 1">
							<view class="title">
								<text>{{index <= 8 ? '0'+(index+1) : index+1}}</text>
								<view>{{item.name}}</view>
							</view>
							<view class="option" v-for="(aitem,aindex) in item.adTopicsRepliesEntityList" :key="aindex">
								<view @click="answer(aitem,item)"><text>{{aitem.elections}}、{{aitem.value}}</text> 
									<image src="@/static/img/select@2x.png" v-if="aitem.checked == false"></image>  
									<image src="@/static/img/selected@2x.png" v-else></image>
								</view>
							</view>
						</view>
						<view class="question" v-else>
							<view class="title">
								<text>{{index <= 8 ? '0'+(index+1) : index+1}}</text>
								<view>{{item.name}}</view>
							</view>
							<view class="option" v-for="(aitem,aindex) in item.adTopicsRepliesEntityList" :key="aindex">
								<view @click="answer2(aitem,item)"><text>{{aitem.elections}}、{{aitem.value}}</text> 
									<image src="@/static/img/select@2x.png" v-if="aitem.checked == false"></image>  
									<image src="@/static/img/selected@2x.png" v-else></image>
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>
			<view class="tips">右滑进入下一页，左滑进入上一页</view>
		</view>
		<member :dialog.sync="dialog"  @hidedialog="hidedialog" @chooseUser="chooseUser"></member>
		<u-modal v-model="showModal1" :show-cancel-button="true" @confirm="Modalconfirm" :content="showContent"></u-modal>
		<reportImgType1 ref="reportImgType1" :info="info"></reportImgType1>
	</view>
</template>

<script>
	import { getUrlParam } from '@/static/js/filter.js';
	import reportImgType1 from '@/pages/quickly/healthStatus/reportImgType1.vue'
	import member  from '@/components/selectMember/selectMember.vue';
	export default{
		components:{member,reportImgType1},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				start: '',
				end: currentDate,
				start_date:'',
				userName:'',
				number: 1,
				showModal1: false,
				questionnaire:[],
				showContent: '',
				dialog:false,
				selected:'',
				info:{},
				isSave:false
			}
		},
		onLoad(options) {
			const _this = this;
			_this.selected = getUrlParam('selected');
			_this.findByTopicsTypeAxios().then((response)=>{
				if(options.edit == 1 || options.selected == 1){
					_this.selected = options.selected;
					_this.edit = true;
					_this.editId = options.id 
					_this.$api.healthAssessmentDetails(options.id).then((res)=>{
						const data = res.data.result
						_this.userId = data.newAppMentalHealthAssessmentEntity.userId
						_this.userName = data.newAppMentalHealthAssessmentEntity.userName
						_this.start_date = data.newAppMentalHealthAssessmentEntity.fillFormDate
						_this.editTid = data.newAppMentalHealthAssessmentEntity.tid
						_this.questionnaire.map((a)=>{
							data.newUserTopicsEntities.map((b)=>{ 
								a.adTopicsRepliesEntityList.map((c)=>{
									if(c.id == b.titleId){
										c.adTopicsRepliesEntityList.map((d)=>{
											d.nid = b.id
											if(b.userOption && b.userOption.split(',').length > 1){
												// 多选
												b.userOption && b.userOption.split(',').map((e)=>{
													if(e == d.elections){
														d.checked = true
													}
												})
											}else{
												// 单选
												if(d.elections == b.userOption){
													d.checked = true
												}
											}
										})
									}
								})
							})
						})
					})
				}
			})
		},
		watch:{
			start_date(){
				this.questionnaire.map((a)=>{
					a.adTopicsRepliesEntityList.map((b)=>{
						b.adTopicsRepliesEntityList.map((c)=>{
							if(c.checked){
								if(c.type == 104){
									const listdata = this.questionnaire[1].adTopicsRepliesEntityList
									// 如果吸烟调查选择A
									if(c.elections == 'A'){
										listdata[1].adTopicsRepliesEntityList[0].checked = true;
										listdata[1].hidden = true;
										listdata[2].hidden = true;
										listdata[3].hidden = true
									}
									// 如果吸烟调查选择B
									else if(c.elections == 'B'){
										listdata[1].adTopicsRepliesEntityList[0].checked = false;
										listdata[1].hidden = false;listdata[2].hidden = false;listdata[3].hidden = false
									}
									// 如果吸烟调查选择C
									else if(c.elections == 'C'){
										listdata[1].adTopicsRepliesEntityList[0].checked = false;
										listdata[1].hidden = false;listdata[2].hidden = false;listdata[3].hidden = true
									}
								}else if(c.type == 76){
									const listdata = this.questionnaire[2].adTopicsRepliesEntityList
									// 如果饮酒调查选择A
									if(c.elections == 'A'){
										listdata[3].adTopicsRepliesEntityList[3].checked = true;
										listdata[1].hidden = true;listdata[2].hidden = true;listdata[3].hidden = true;listdata[4].hidden = true;listdata[5].hidden = true
									}
									// 如果饮酒调查选择B
									else if(c.elections == 'B'){
										listdata[3].adTopicsRepliesEntityList[3].checked = false;
										listdata[1].hidden = false;listdata[2].hidden = false;listdata[3].hidden = false;listdata[4].hidden = false;listdata[5].hidden = true
									}
									// 如果饮酒调查选择C
									else if(c.elections == 'C'){
										listdata[3].adTopicsRepliesEntityList[3].checked = false;
										listdata[1].hidden = true;listdata[2].hidden = true;listdata[3].hidden = true;listdata[4].hidden = true;listdata[5].hidden = false
									}
								}else if(c.type == 65){
									const listdata = this.questionnaire[3].adTopicsRepliesEntityList
									// 如果运动调查选择A
									if(c.elections == 'A'){
										listdata[2].adTopicsRepliesEntityList[0].checked = true;
										listdata[4].adTopicsRepliesEntityList[0].checked = true;
										listdata[1].hidden = true;listdata[2].hidden = true;listdata[3].hidden = true;listdata[4].hidden = true;listdata[5].hidden = true
									}else{
										listdata[2].adTopicsRepliesEntityList[0].checked = false;
										listdata[4].adTopicsRepliesEntityList[0].checked = false;
										listdata[1].hidden = false;listdata[2].hidden = false;listdata[3].hidden = false;listdata[4].hidden = false;listdata[5].hidden = false
									}
								}
							}
						})
					})
				})
			}
		},
		methods:{
			// 多选选答案
			answer2(aitem,item){
				aitem.checked = !aitem.checked
			},
			// 单选选答案
			answer(aitem,item) {
				if(this.selected){
					return;
				}
				const constArr = item.adTopicsRepliesEntityList.map((a) => {
					a.checked = false
					return a
				})
				aitem.checked = true	
				const listdata = this.questionnaire[this.number-1].adTopicsRepliesEntityList
				if(aitem.type == 104){
					// 如果吸烟调查选择A
					if(aitem.elections == 'A'){
						listdata[1].adTopicsRepliesEntityList[0].checked = true;
						listdata[1].hidden = true;
						listdata[2].hidden = true;
						listdata[3].hidden = true
					}
					// 如果吸烟调查选择B
					else if(aitem.elections == 'B'){
						listdata[1].adTopicsRepliesEntityList[0].checked = false;
						listdata[1].hidden = false;listdata[2].hidden = false;listdata[3].hidden = false
					}
					// 如果吸烟调查选择C
					else if(aitem.elections == 'C'){
						listdata[1].adTopicsRepliesEntityList[0].checked = false;
						listdata[1].hidden = false;listdata[2].hidden = false;listdata[3].hidden = true
					}
				}else if(aitem.type == 76){
					// 如果饮酒调查选择A
					if(aitem.elections == 'A'){
						listdata[3].adTopicsRepliesEntityList[3].checked = true;
						listdata[1].hidden = true;listdata[2].hidden = true;listdata[3].hidden = true;listdata[4].hidden = true;listdata[5].hidden = true
					}
					// 如果饮酒调查选择B
					else if(aitem.elections == 'B'){
						listdata[3].adTopicsRepliesEntityList[3].checked = false;
						listdata[1].hidden = false;listdata[2].hidden = false;listdata[3].hidden = false;listdata[4].hidden = false;listdata[5].hidden = true
					}
					// 如果饮酒调查选择C
					else if(aitem.elections == 'C'){
						listdata[3].adTopicsRepliesEntityList[3].checked = false;
						listdata[1].hidden = true;listdata[2].hidden = true;listdata[3].hidden = true;listdata[4].hidden = true;listdata[5].hidden = false
					}
				}else if(aitem.type == 65){
					// 如果运动调查选择A
					if(aitem.elections == 'A'){
						listdata[2].adTopicsRepliesEntityList[0].checked = true;
						listdata[4].adTopicsRepliesEntityList[0].checked = true;
						listdata[1].hidden = true;listdata[2].hidden = true;listdata[3].hidden = true;listdata[4].hidden = true;listdata[5].hidden = true
					}else{
						listdata[2].adTopicsRepliesEntityList[0].checked = false;
						listdata[4].adTopicsRepliesEntityList[0].checked = false;
						listdata[1].hidden = false;listdata[2].hidden = false;listdata[3].hidden = false;listdata[4].hidden = false;listdata[5].hidden = false
					}
				}
			},
			touchStart(e){
			    this.startDataX=e.changedTouches[0].clientX;            
			    this.startDataY=e.changedTouches[0].clientY;
			},
			touchEnd(e){
			    const subX=e.changedTouches[0].clientX-this.startDataX;
			    const subY=e.changedTouches[0].clientY - this.startDataY; //右滑
				if(subX>100){
					if(this.number >= 2) {
						this.number = this.number - 1
					}			
				}else if(subX<-100){ //左滑
					if(this.number <=5) {
						this.number = this.number + 1
					}
					
				}else{
					console.log('无效')
				}
			
			},
			// 获取题目
			findByTopicsTypeAxios(){
				return new Promise((success,error)=>{
					this.$api.findByTopicsType('ids=18&ids=19&ids=20&ids=21&ids=22&ids=23').then((res)=>{
						if(res){
							const data =  Object.keys(res.data.result).map((a)=>{
								const aData =  res.data.result[a].adTopicsRepliesEntityList.map((b)=>{
									b.adTopicsRepliesEntityList.map((c)=>{c.checked = false;return b})
									return b
								})
								return res.data.result[a]
							})
							this.questionnaire = data
							success(res.data.result)
						}else{
							error('')
						}
					})
				})
			},
			//关闭弹出框
			hidedialog(){
				this.dialog = false
			},
			//选择会员
			chooseUser(e){
				this.userId = e.userId;
				this.userName = e.userName;
			},
			// 日期
			bindDateChange(e) { 
				this.start_date = e.target.value;
			},
			// 获取当前时间
			getDate(type) {
			   const date = new Date();
			   let year = date.getFullYear();
			   let month = date.getMonth() + 1;
			   let day = date.getDate();
			  
			   if (type === 'start') {
				year = year - 60;
			   } else if (type === 'end') {
				year = year + 2;
			   }
			   month = month > 9 ? month : '0' + month;;
			   day = day > 9 ? day : '0' + day;
			   return `${year}-${month}-${day}`;
			},
			save(e){
				const _this = this;
				if(this.isSave){
					uni.showToast({
						title:'该数据已生成报告，请返回重新添加',
						icon:'none'
					})
					return
				}
				if(!this.userId) {
					uni.showToast({
						title:'请选择会员',
						icon:'none'
					})
					return
				}
				if(!this.start_date) {
					uni.showToast({
						title:'请选择日期',
						icon:'none'
					})
					return
				}
				let appUserTopicsEntities = []
				this.questionnaire.map((a)=>{
					var bData = a.adTopicsRepliesEntityList.map((b)=>{
						let checkArr = b.adTopicsRepliesEntityList.filter((c)=>{return c.checked})
						console.log(b.status)
						appUserTopicsEntities.push({
							titleId:b.id,
							id:checkArr.length > 0 && checkArr[0].nid||b.adTopicsRepliesEntityList[0].nid,
							userOption:checkArr.length > 0 ? checkArr.map((a)=>{return a.elections}).join(',') : '',
							userValue: checkArr.length > 0 ? checkArr.map((a)=>{return a.value}).join(',') : '',
							userNumber: b.status == 2 ? '' : checkArr.length > 0 ? checkArr.map((a)=>{return a.numbers}).join(',') : ''
						})
					})
				})
				const data = {
					userId : this.userId,
					userName : this.userName,
					status: e,
					source: 3,
					upload: 1,
					fillFormDate:this.start_date,
					healthId: JSON.parse(localStorage.userInfo).id,
					tid: [18,19,20,21,22,23],
					appUserTopicsEntities:appUserTopicsEntities,
					appUserTopicsTitleEntity:{
						healthId:JSON.parse(localStorage.userInfo).id,
						userId:this.userId
					}
				}
				if(this.edit){
					// 编辑
					if(this.selected == 1){
						delete data.source
					}
					data.id = Number(this.editId)
					data.appUserTopicsTitleEntity.id = this.editTid
					this.$api.healthAssessmentUpdate(data).then((res)=>{
						if(res.data.returnCode == 200){
							if(e == 3){
								_this.isSave = true
								//申请评估
								res.data.result.userOptionValueVos = res.data.result.userOptionValueVos.filter((a)=>{return a.name})
								_this.info = res.data.result
								uni.showLoading({title:'加载中'})
								setTimeout(()=>{
									_this.$refs.reportImgType1.toImg().then((base64)=>{
										var arr = base64.split(',')
										var mime = arr[0].match(/:(.*?);/)[1]
										var bstr = atob(arr[1]) 
										var nn = bstr.length 
										var u8arr = new Uint8Array(nn);
										while(nn--){
											u8arr[nn] = bstr.charCodeAt(nn);
										}
										var obj1 = new Blob([u8arr], {type:mime});
										_this.$api.healthAssessmentuploadWord({fileOne:obj1},res.data.result.id).then((ares) => {
											uni.hideLoading()
											if(JSON.parse(ares.data).returnCode == 200){
												window.location.href = 'http://health.jlm12580.com/web/viewer.html?file='+JSON.parse(ares.data).result.url
											}
										})
									})
								},1000)
							}else{
								uni.navigateTo({
									url:'/pages/quickly/healthStatus/navigation?current=0'
								})
							}
						}
					})
				}else{
					// 保存
					_this.$api.healthAssessmentAdd(data).then((res)=>{
						if(res.data.returnCode == 200){
							if(e == 3){
								_this.isSave = true
								//申请评估
								res.data.result.userOptionValueVos = res.data.result.userOptionValueVos.filter((a)=>{return a.name})
								_this.info = res.data.result
								uni.showLoading({title:'加载中'})
								setTimeout(()=>{
									_this.$refs.reportImgType1.toImg().then((base64)=>{
										var arr = base64.split(',')
										var mime = arr[0].match(/:(.*?);/)[1]
										var bstr = atob(arr[1]) 
										var nn = bstr.length 
										var u8arr = new Uint8Array(nn);
										while(nn--){
											u8arr[nn] = bstr.charCodeAt(nn);
										}
										var obj1 = new Blob([u8arr], {type:mime});
										_this.$api.healthAssessmentuploadWord({fileOne:obj1},res.data.result.id).then((ares) => {
											uni.hideLoading()
											if(JSON.parse(ares.data).returnCode == 200){
												window.location.href = 'http://health.jlm12580.com/web/viewer.html?file='+JSON.parse(ares.data).result.url
											}
										})
									})
								},1000)
							}else{
								uni.navigateTo({
									url:'/pages/quickly/healthStatus/navigation?current=0'
								})
							}
						}
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.slidingBlock {
		display: flex;
		align-items: center;
		height: 40upx;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 10;
		position: fixed;
		top: 218upx;
		left: 0;
		padding: 0 24upx;
		box-sizing: border-box;
		view:nth-child(1) {
			flex: 1;
			height: 6upx;
			background: #EAEAEA;
			border-radius: 4upx;
			margin-right: 25upx;
			display: flex;
			text {
				flex: 1;
			}
			.on {
				background: #05C6AD;
				border-radius: 4upx;
			}
		}
		view:nth-child(2) {
			color: #05C6AD;
			font-size: 22upx;
		}
	}	
	.box {
	    width: 750upx;
		min-height: calc(100vh - 44px);
		background: #F8F8F8;
		padding-bottom: 135upx;
	    .selectMember {
			position: fixed;
			top: 88upx;
			left: 0;
			width: 750upx;
			height: 130upx;
			background-color: #05C6AD;
			padding: 34upx 24upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			z-index: 10;
			.member {
				margin-right: 45upx;
				height: 62upx;		
				border-radius: 6upx;
				line-height: 62upx;
				flex: 1;
				display: flex;
				background: #fff;
				image {
					width: 26upx;
					height: 26upx;
					margin: 0 18upx;
				}
				view {
					background-color: #FFFFFF;
					text-indent: 1em;
					color: #05C6AD;
					font-size: 30upx;   
					border-radius: 8upx;
				}
				view:nth-of-type(2){
					flex: 1;
					margin-left: 20upx;
				}
			}
			.save {
				width: 138upx;
				height: 62upx;
				line-height: 62upx;
				text-align: center;
				border-radius: 8upx;
				background: #BEFFF7;
				color: #333333;
				margin-right: 19upx;
				font-size: 28upx;
			}
			.toSend {
				background-color: #009383;
				width: 138upx;
				height: 62upx;
				line-height: 62upx;
				text-align: center;
				border-radius: 8upx;
				color: #FFFFFF;
				font-size: 28upx;
			}
		}
	
	    .content {
	        margin-top: 130upx;
	        padding-top: 26upx;
			.tips {
				color: #666666;
				font-size: 24upx;
				text-align: center;
				margin: 20upx auto;
			}
	        .question {
	            width: 702upx;
	            height: 100%;
	            background: #FFFFFF;
	            border-radius: 12upx;
	            margin: 16upx auto 0;
				padding: 28upx 40upx 28upx 20upx;
				box-sizing: border-box;
				.title {
					color: #333333;
					font-size: 30upx;
					display: flex;
					text{
						width: 40upx;
						height: 27upx;
						line-height: 27upx;
						background: #05C6AD;
						border-radius: 14upx;
						color: #FFFFFF;
						font-size: 26upx;
						display: inline-block;
						text-align: center;
						margin-right: 18upx;
						margin-top: 6upx;
					}
					view {
						flex: 1;
					}
				}
				.option {
					margin-top: 31upx;
					view {
						line-height: 36upx;
						color: #333333;
						font-size: 30upx;
						display: flex;
						align-items: center;
						text {
							flex: 1;
						}
						image {
							width: 26upx;
							height: 26upx;
						}
					}
				}
	        }
	        .question:first-child {
	            // margin-top: 0;
	        }
	    }
	}
	.content {
		margin-top: 170upx !important;
		.navigator {
			height: 48upx;
			width: 336upx;
			margin: 0 auto;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
